<script setup>
import {Star, View} from "@element-plus/icons-vue";

const imgList = [
  {
  name:"slide1",
  src:new URL('../../assets/slide1.jpg',import.meta.url).href,
  title:"这是slide1.jpg"
  },
  {
    name:"slide2",
    src:new URL('../../assets/slide2.jpg',import.meta.url).href,
    title:"这是slide2.jpg"
  },
  {
    name:"slide3",
    src:new URL('../../assets/slide3.jpg',import.meta.url).href,
    title:"这是slide3.jpg"
  },
  {
    name:"slide4",
    src:new URL('../../assets/slide4.jpg',import.meta.url).href,
    title:"这是slide4.jpg"
  },
  {
    name:"slide5",
    src:new URL('../../assets/slide5.jpg',import.meta.url).href,
    title:"这是slide5.jpg"
  },
  {
    name:"slide6",
    src:new URL('../../assets/slide6.jpg',import.meta.url).href,
    title:"这是slide6.jpg"
  },
]
</script>

<template>
  <div style="display: flex;justify-content: space-between;">
    <div style="font-size: 20px;font-family:'Microsoft YaHei' ;">互联网美食分享平台</div>
    <div><el-input
        v-model="input1"
        style="width: 150px"
        size="small"
        placeholder="Please Input"
        :suffix-icon="Search"
    /></div>
  </div>

  <div align="center" style="height: 40px">


    <el-button type="primary" disabled>Home</el-button>

    <router-link to="/communication/list">
      <el-button type="primary">美食交流</el-button>
    </router-link>
    <router-link to="/notice/list">
      <el-button type="primary">美食公告</el-button>
    </router-link>
    <router-link to="/info/list">
      <el-button type="primary">美食资讯</el-button>
    </router-link>
    <router-link to="/user/info">
      <el-button type="primary">个人账户</el-button>
    </router-link>
    <router-link to="/user/star">
      <el-button type="primary">个人收藏</el-button>
    </router-link>
    <router-link to="/show/list">
      <el-button type="primary">美食展示</el-button>
    </router-link>

  </div>
  <!--  轮播图  -->
  <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in imgList" :key="item">
      <img :src="item.src">
    </el-carousel-item>
  </el-carousel>

    <div style="height: 20px"></div>
  <div style="display: flex;justify-content: center;">
    <div style="border: 1px;;width: 200px;">
        <div style="color: white;font-size: 22px;background-color:#c6e2ff;font-family:'Microsoft YaHei' ;height: 50px;display:flex;align-items: center;justify-content: center"> 美食公告   More</div>
<!--        <div style="font-size: 20px;">网站公告</div>-->
        <div style="color: gray;font-size: 14px;background-color: white">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;伴随着人们生活质量水平的提高，人们对于食物方面的要求也逐渐上升到了追求品质的阶段了，尤其是在今年严重的肺炎疫情的影响下，更是让我们一下就警醒了起来。在伴随着互联网快速发展的时代，越来越多的人们希望获得到更多的有关于美食方面的信息，自己动手制作，这样就可以在足不出户保证安全的同时能够享受到美食...</div>
    </div>
    <div style="width: 20px"></div>
      <div style="border: 1px;width: 40px;font-size: 20px;">
        美
        食
        资
        讯</div>
    <div style="width: 20px"></div>
      <el-card style="max-width: 240px">
        <img
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%"
        />美味汉堡
          <el-icon><Star /></el-icon>25
          <el-icon><View /></el-icon>223
      </el-card>
    <div style="width: 20px"></div>
      <el-card style="max-width: 240px">
        <img
            src="https://img1.baidu.com/it/u=3382106738,3155049567&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            style="width: 100%"
        />云南美食
        <el-icon><Star /></el-icon>0
        <el-icon><View /></el-icon>73
      </el-card>
    <div style="width: 20px"></div>
      <el-card style="max-width: 240px">
        <img
            src="https://img0.baidu.com/it/u=2884754623,1958584677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            style="width: 100%"
        />新西兰羊排
        <el-icon><Star /></el-icon>35
        <el-icon><View /></el-icon>441
      </el-card>
  </div>
</template>

<style scoped lang="scss">
</style>